<template>
  <div>
    <!-- 头部 -->
    <MyHeader
      background="#1dff2c"
      color="black"
      content="购物车案例"
    ></MyHeader>
    <div style="padding: 45px 0 50px">
      <!-- 内容列表 -->
      <MyGoods v-for="obj in list" :key="obj.id" :dataObj="obj"> </MyGoods>
    </div>
    <!-- 底部 -->
    <MyFooter :arr="list"></MyFooter>
  </div>
</template>

<script>
// 目标: 项目初始化 - 静态页面
// 1. 创建项目, 下包, 引入bs样式
// 2. 拆分需求组件, 创建 - 分别标签+样式
// 3. App.vue上显示, 微调样式(上下内边距)

/* 
全选: --computed
1.小选框全选是影响全选框
2.全选框会控制所有的小选框进行全选 或全不选

总数量: --computed
1.统计显示所有勾选商品的数量的和

总价: -computed
1.统计显示所有勾选上牌的数量乘以单价的和
*/
import MyHeader from "./components/MyHeader";
import MyGoods from "./components/MyGoods";
import MyFooter from "./components/MyFooter";
export default {
  data() {
    return {
      list: [],
    };
  },
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  created() {
    this.getList();
  },
  computed:{


  },
  methods: {
    getList() {
      this.$axios({
        method: "GET",
        url: "/api/cart",
      })
        .then((res) => {
          this.list = res.data.list;
          console.log(this.list);
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>

<style>
</style>